<template>
  <div class="root">
    <div class="container-shell">
      <div id="container" ref="container"
        :style="{ height: screen_height + 'px', width: screen_width + 'px' }"></div>
      <!-- <div class="control_btn flex-col">
        <div class="flex-row flex-1">
          <div class="flex-1 flex-row align-center justify-center" @click="screenShot">
            <div class="photo"></div>
          </div>
          <div class="flex-1 flex-row align-center justify-center">
            <div class="speek"></div>
          </div>
          <div class="flex-1 flex-row align-center justify-center" @click="startRecord" v-if="startLook == false">
            <div class="look"></div>
          </div>
          <div class="flex-1 flex-row align-center justify-center" @click="stopAndSaveRecord" v-if="startLook == true">
            <div class="nolook"></div>
          </div>
          <div class="flex-1 flex-row align-center justify-center" @click="mute" v-if="!quieting">
            <div class="listen"></div>
          </div>
          <div class="flex-1 flex-row align-center justify-center" @click="cancelMute" v-if="quieting">
            <div class="nolisten"></div>
          </div>
          <div class="flex-1 flex-row align-center justify-center">
            <div class="close" @click="closeVideo()"></div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
import { device_play } from '@/api/server'
import { device_stop } from '@/api/bigdata'

export default {
  name: "DemoPlayer",
  props: {
    deviceId: {
      type: Number,
      default: null
    },
    screen_width: {
      type: Number,
      default() {
        return 0
      }
    },
    screen_height: {
      type: Number,
      default() {
        return 0
      }
    },
    control_Btn: {
      type: Boolean,
      default() {
        return true
      }
    },
  },

  watch: {
    deviceId: {
      handler(n) {
        this.play()
      }
    }
  },
  data() {
    return {
      $jessibuca: null,
      playing: false,
      quieting: true,
      loaded: false, // mute
      err: "",
      performance: "",
      volume: 1,
      rotate: 0,
      recording: false,
      recordType: 'mp4',
      scale: 0,
      startLook: false,
      videoUrl: '',
      retry: false,
      playTimer: null,   //计时器
    };
  },
  mounted() {
    this.create();
    this.play();
    window.onerror = (msg) => (this.err = msg);
  },

  destroyed() {
    this.$jessibuca.destroy();
    this.clearPlayTimer()
    this.stopVideo()
  },
  unmounted() {
    this.$jessibuca.destroy();
    this.clearPlayTimer()
  },
  methods: {
    stopVideo() {
      if (this.deviceId) {
        device_stop({ id: this.deviceId }).then(res => { })
      }
    },
    clearPlayTimer() {
      if (this.playTimer) {
        clearInterval(this.playTimer)
      }
      this.retry = false
    },
    create() {
      console.log('this is create')
      this.$jessibuca = new window.Jessibuca(
        {
          container: this.$refs.container,
          videoBuffer: 2, // 缓存时长
          isResize: false,
          useWCS: false,
          useMSE: true,
          text: "",
          hasAudio: true,
          heartTimeoutReplayTimes: 10,
          loadingText: "疯狂加载中...",
          decoder: '/decoder.js',
          // debug: true,
          controlAutoHide: true,
          supportDblclickFullscreen: false,
          showBandwidth: false, // 显示网速
          operateBtns: {
            fullscreen: false,
            screenshot: false,
            play: false,
            audio: false,
          },
          isFlv: true,
          isNotMute: false,
          timeout: 100,
          heartTimeout: 20,
        }
      );
      var _this = this;
      this.$jessibuca.on("load", function () {
        console.log("on load");
      });

      this.$jessibuca.on("log", function (msg) {
        // console.log("on log", msg);
      });

      this.$jessibuca.on("record", function (msg) {
        // console.log("on record:", msg);
      });

      this.$jessibuca.on("pause", function () {
        // console.log("on pause");
        _this.playing = false;
      });

      this.$jessibuca.on("play", function () {
        // console.log("on play");
        _this.playing = true;
      });
      // this.$jessibuca.on("fullscreen", function (msg) {
      //   console.log("on fullscreen", msg);
      // });

      // this.$jessibuca.on("mute", function (msg) {
      //   console.log("on mute", msg);
      //   _this.quieting = msg;
      // });

      // this.$jessibuca.on("mute", function (msg) {
      //   console.log("on mute2", msg);
      // });

      // this.$jessibuca.on("audioInfo", function (msg) {
      //   console.log("audioInfo", msg);
      // });

      // this.$jessibuca.on("bps", function (bps) {
      //   // console.log('bps', bps);
      // });
      // let _ts = 0;
      // this.$jessibuca.on("timeUpdate", function (ts) {
      //     console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
      //     _ts = ts;
      // });

      // this.$jessibuca.on("videoInfo", function (info) {
      //   console.log("videoInfo", info);
      // });

      this.$jessibuca.on("error", function (error) {
        console.log("error_player", error);
      });

      this.$jessibuca.on("timeout", function () {
        console.log("timeout_player");
      });

      this.$jessibuca.on('start', function () {
        console.log('frame start');
      })

      this.$jessibuca.on("stats", function (s) {
        console.log("stats is", s)
        // if (s.fps == 0) {
        //   if(!_this.retry){
        //     _this.playVideo()
        //   }
        // }else{
        //   _this.clearPlayTimer()
        // }
      })

      this.$jessibuca.on("performance", function (performance) {
        var show = "卡顿";
        if (performance === 2) {
          show = "非常流畅";
        } else if (performance === 1) {
          show = "流畅";
        }
        _this.performance = show;
      });

      // this.$jessibuca.on('kBps', function (kBps) {
      //   console.log('kBps', kBps);

      // });

      this.$jessibuca.on("play", () => {
        this.playing = true;
        this.loaded = true;
        this.quieting = this.$jessibuca.isMute();
      });

      this.$jessibuca.on('recordingTimestamp', (ts) => {
        console.log('recordingTimestamp', ts);
      })
    },
    playVideo() {
      this.clearPlayTimer()
      this.retry = true
      this.playTimer = setInterval(() => {
        this.play()
      }, 5 * 1000);
    },
    play() {
      var that = this
      // console.log('this is create')
      device_play({ id: this.deviceId,type:20 }).then(res => {
        console.log(res)
        // that.$jessibuca.play(res.live_addr);
        that.$jessibuca.play(res.live_addr).then(() => {
          console.log('play success')
        }).catch((e) => {
          console.log('play error', e)
        })
      })
    },
    mute() {
      this.$jessibuca.mute();
    },
    cancelMute() {
      this.$jessibuca.cancelMute();
    },

    pause() {
      this.$jessibuca.pause();
      this.playing = false;
      this.err = "";
      this.performance = "";
    },
    volumeChange() {
      this.$jessibuca.setVolume(this.volume);
    },
    rotateChange() {
      this.$jessibuca.setRotate(this.rotate);
    },
    destroy() {
      if (this.$jessibuca) {
        this.$jessibuca.destroy();
      }
      this.create();
      this.playing = false;
      this.loaded = false;
      this.performance = "";
    },

    fullscreen() {
      this.$jessibuca.setFullscreen(true);
    },

    clearView() {
      this.$jessibuca.clearView();
    },

    startRecord() {
      this.startLook = true
      const time = new Date().getTime();
      this.$jessibuca.startRecord(time, this.recordType);
    },

    stopAndSaveRecord() {
      this.startLook = false
      this.$jessibuca.stopRecordAndSave();
    },


    screenShot() {
      this.$jessibuca.screenshot();
    },



    changeBuffer() {
      this.$jessibuca.setBufferTime(Number(this.$refs.buffer.value));
    },

    scaleChange() {
      this.$jessibuca.setScaleMode(this.scale);
    },
  },
};
</script>
<style>
.root {
  display: flex;
  place-content: center;
  /*margin-top: 3rem;*/
}

.container-shell {
  position: relative;
  backdrop-filter: blur(5px);
  background: hsla(0, 0%, 50%, 0.5);
  width: auto;
  position: relative;
}


.control_btn {
  width: 208px;
  height: 31px;
  background-image: url(../views/bigdata/static/bigdata/five_bg.png);
  background-position: 0 0;
  background-repeat: repeat;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.photo {
  width: 20px;
  height: 17px;
  background-image: url(../views/bigdata/static/bigdata/five_photo.png);
  background-position: 0 0;
  background-repeat: repeat;
}

.speek {
  width: 14px;
  height: 19px;
  background-image: url(../views/bigdata/static/bigdata/five_speek.png);
  background-position: 0 0;
  background-repeat: repeat;
}

.look {
  width: 19px;
  height: 19px;
  background-image: url(../views/bigdata/static/bigdata/five_look.png);
  background-position: 0 0;
  background-repeat: repeat;
}

.noLook {
  width: 19px;
  height: 19px;
  background-image: url(../views/bigdata/static/bigdata/nolook.png);
  background-position: 0 0;
  background-repeat: repeat;
}

.listen {
  width: 17px;
  height: 17px;
  background-image: url(../views/bigdata/static/bigdata/five_listen.png);
  background-position: 0 0;
  background-repeat: repeat;
}

.nolisten {
  width: 17px;
  height: 17px;
  background-image: url(../views/bigdata/static/bigdata/nolisten.png);
  background-position: 0 0;
  background-repeat: repeat;
}

.close {
  width: 13px;
  height: 13px;
  background-image: url(../views/bigdata/static/bigdata/five_close.png);
  background-position: 0 0;
  background-repeat: repeat;
}

/*
.container-shell {
  position: relative;
  backdrop-filter: blur(5px);
  background: hsla(0, 0%, 50%, 0.5);
  padding: 30px 4px 10px 4px;
   border: 2px solid black;
  width: auto;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 10px 20px;
}
*/
.container-shell-title {
  position: absolute;
  color: darkgray;
  top: 4px;
  left: 10px;
  text-shadow: 1px 1px black;
}

.tag-version {}

#container {
  background: rgba(13, 14, 27, 0.7);
  width: 640px;
  height: 398px;
}

.input {
  display: flex;
  align-items: center;
  margin-top: 10px;
  color: white;
  place-content: stretch;
}

.input2 {
  bottom: 0px;
}

.input input[type='input'] {
  flex: auto;
}

.err {
  position: absolute;
  top: 40px;
  left: 10px;
  color: red;
}

.option {
  position: absolute;
  top: 4px;
  right: 10px;
  display: flex;
  place-content: center;
  font-size: 12px;
}

.option span {
  color: white;
}

.page {
  background: url(/bg.jpg);
  background-repeat: no-repeat;
  background-position: top;
}

@media (max-width: 720px) {
  #container {
    width: 90vw;
    height: 52.7vw;
  }
}
</style>
